/*
  学习目标：模拟vue中的插槽
  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽
 
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello>123</Hello>
        <HelloHasName>{['鹅鹅鹅', '红掌拨清波']}</HelloHasName>
        <HelloHasName2>
          {{ title: '蜀道难', content: '难于上青天' }}
        </HelloHasName2>
      </div>
    );
  }
}
function HelloHasName2({ children }) {
  const { title, content } = children;
  return (
    <div>
      Hello
      <h1 className="title">{title}</h1>
      <div className="content">{content}</div>
    </div>
  );
}

function HelloHasName({ children }) {
  return (
    <div>
      Hello
      <h1 className="title">{children[0]}</h1>
      <div className="content">{children[1]}</div>
    </div>
  );
}

//  匿名插槽
function Hello({ children }) {
  return (
    <div>
      Hello
      {children}
    </div>
  );
}
